<template>
  <div>
    <div class="box1">
      <van-image width="100vw" height="400" :src="list.pic" />
      <br />
      <div>￥{{ list.minPrice }}</div>
      <p>
        <s>价格￥{{ list.originalPrice }}</s>
      </p>
      <br />
      <div>{{ list.characteristic }}</div>
    </div>
    <br />
    <br />
    <br />
    <div class="box" v-html="content"></div>

    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
      <van-action-bar-icon icon="cart-o" text="购物车" />
      <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
      <van-action-bar-button
        @click="toDetail"
        type="warning"
        text="加入购物车"
      />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>

<script setup>
// 引入路由
import { useRoute, useRouter } from "vue-router";
// 引入接口
import { detail } from "@/api/api";
// 引入ref
import { ref } from "vue";
// 引入vuex
import { useStore } from "vuex";

let route = useRoute();
let router = useRouter();
let store = useStore();

let list = ref({});
let content = ref("");

detail(route.query.id).then((res) => {
  list.value = res.data.basicInfo;
  content.value = res.data.content;
});

let toDetail = () => {
  router.push("/cart");
  store.commit("saveData", {
    id: list.value.id,
    pic: list.value.pic,
    price: list.value.minPrice,
    num: 1,
    flag: true,
  });
};
</script>

<style scoped>
.box {
  margin-bottom: 50px;
}
.box /deep/ img {
  width: 100vw;
  height: 400px;
}

.box1 {
  margin-bottom: 30px;
}
</style>